<template>
  <div class="table-container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
    <template #header>
    <div>
    <span>分配被申请人</span>
    </div>
    </template>
    <el-table :data="cases" border stripe style="width: 100%" height="400">
      <el-table-column prop="caseId" label="案件编号" width="180">
      </el-table-column>
      <el-table-column prop="applicant.name" label="申请人">
      </el-table-column>
      <el-table-column prop="respondent.name" label="被申请人">
      </el-table-column>
      <el-table-column prop="createdTime" label="创建时间" width="180">
      </el-table-column>
      <el-table-column prop="status" label="案件状态" width="180">
        <template #default="scope">
          {{ CaseStatus.getCommentByStatus(scope.row.caseState) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="420">
        <template #default="scope">
          <el-button  type="success" @click="setRespondentDialog.look(scope.row)">处理</el-button>
          <el-button  type="primary" @click="detailedCase.look(scope.row)">详细</el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-card>
    
 
    <el-dialog v-model="setRespondentDialog.visible" title="选择被申请人" width="30%">
      
      <!-- 选择被申请人下拉框 -->
      <el-select v-model="setRespondentDialog.respondentId" placeholder="请选择被申请人" 
        style="margin-right: 10px; width: 160px">
        <el-option v-for="item in respondents.filter(item=>{
          if(item.state!=1) return false;
          if(selectPhone=='')return true;
          return item.phoneNum.indexOf(selectPhone) != -1;
        })" :key="item.respondentId" :label="item.name + ' ' + item.phoneNum"
          :value="item.respondentId">
        </el-option>
      </el-select>
      <el-input style="width: 200px;" :placeholder="'手机号筛选'" v-model="selectPhone"   clearable />
      <!-- 确定按钮 -->
      <el-button  type="primary" @click="setRespondentDialog.submit()" style="margin-right: 10px">
        确定
      </el-button>
    </el-dialog>
  </div>
  <DetailedCase v-model="detailedCase.visible" :case="detailedCase.case" :case-id="detailedCase.caseId"></DetailedCase>
</template>

<script lang="ts" setup>
import DetailedCase from '@/compontent/detailedCase.vue';
import { getCaseByCaseStatus } from '@/axios/case/caseReq';
import { getAllRespondent } from '@/axios/respondent/respondentReq';
import { setRespondent } from '@/axios/case/caseReq';
import ResUtil from '@/utils/resUtil';
import { Case, CaseStatus } from '@/types/response/case';
import { getUserStatesByIds } from '@/axios/admin/accountReq';
import { reactive, ref, Ref } from 'vue';
import Respondent from '@/types/response/respondent';
import Notice from '@/utils/notice';
let cases: Ref<Case[]> = ref([]);
let respondents: Ref<ExtendRespondent[]> = ref([]);
let selectPhone=ref("");
type ExtendRespondent = Respondent & { state?: number };
function init() {
  //案件的初始化
  getCaseByCaseStatus(CaseStatus.waitOrder).then(res => {
    if (res instanceof Array) {
      cases.value = res.filter(item => item.isRelated == 0);
    }
  })
  //被申请人的初始化
  getAllRespondent().then(res => {
    let userIds=res.map(item=>item.respondentId);
    getUserStatesByIds(userIds).then(states=>{//获取所有用户的状态
        res.forEach(item=>{
          (item as ExtendRespondent).state=states.get(item.respondentId);
        })
        respondents.value=res;
    })
  })
}
init();
let setRespondentDialog = reactive({
  visible: false,
  case: new Case(),
  respondentId: null,

  look(c: Case) {
    setRespondentDialog.case = c;
    setRespondentDialog.visible = true;
  },
  close() {
    setRespondentDialog.visible = false;
    setRespondentDialog.case = null;
  },
  submit() {
    let c = setRespondentDialog.case;
    setRespondent(c.caseId, setRespondentDialog.respondentId).then(res => {
      if (res) {
        Notice.success("设置被申请人成功");
        cases.value.splice(cases.value.indexOf(c), 1)
      }
      else Notice.error("设置被申请人失败");
    })
    setRespondentDialog.close();
  },
})
let detailedCase = ref({
  look: (c:Case) => {
    detailedCase.value.caseId = c.caseId;
    detailedCase.value.case=c;
    detailedCase.value.visible = true;
  },
  visible: false,
  caseId: null,
  case: null
});
</script>

<style scoped>
.table-container {
  padding: 20px;
}

.el-select {
  margin-right: 10px;
}

.el-button+.el-button {
  margin-left: 10px;
}
</style>